<template>
  <view class="category">
    <navigator
      url="/pages/"
      open-type="navigate"
      hover-class="none"
      class="category-item"
      v-for="item in list"
      :key="item.id"
    >
      <image :src="item.icon" mode="aspectFill" />
      <text>{{ item.name }}</text>
    </navigator>
  </view>
</template>

<script setup lang="ts">
import type { CategoryItem } from '@/types/home'

const props = defineProps<{
  list: CategoryItem[]
}>()
</script>

<style lang="scss" scoped>
.category {
  margin: 20rpx 0 0;
  padding: 20rpx 0;
  min-height: 328rpx;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid: 0;
  justify-content: center;
  align-items: center;
  .category-item {
    width: 100rpx;
    height: 100rpx;
    display: flex;
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
    align-content: center;

    //  flex-wrap: wrap;
    image {
      width: 100%;
      height: 100%;
    }

    text {
      font-size: 28rpx;
      color: #666;
    }
  }
}
</style>
